<template>
	<div class="search-box">
		<div class="location">
			<div class="city" @click="cityClick">{{ currentCity?.cityName }}</div>
			<div class="position" @click="positionClick">
				<span class="text">我的位置</span>
				<img src="@/assets/img/home/icon_location.png" alt="" />
			</div>
		</div>

		<div class="section date-range" @click="showCalender = true">
			<div class="start">
				<div class="date">
					<span class="tip">入组</span>
					<span class="time">{{ startDate }}</span>
				</div>
				<div class="stay">共{{ stayCount }}晚</div>
			</div>
			<div class="end">
				<div class="date">
					<span class="tip">离店</span>
					<span class="time">{{ endDate }}</span>
				</div>
			</div>
		</div>

		<!-- 价格/人数选择 -->
		<div class="section price-counter bottom-gray-line">
			<div class="start">价格不限</div>
			<div class="end">人数不限</div>
		</div>
		<!-- 关键字 -->
		<div class="section keyword bottom-gray-line">关键字/位置/民宿名</div>

		<!-- 热门建议 -->
		<div class="section hot-suggests">
			<template v-for="(item, index) in hotSuggests" :key="index">
				<div class="item" :style="{ color: item.tagText.color, background: item.tagText.background.color }">
					{{ item.tagText.text }}
				</div>
			</template>
		</div>

		<!-- 搜索按钮 -->
		<div class="section search-btn" @click="searchClick">
			<div class="btn">开始搜索</div>
		</div>

		<!-- 选择日期 -->
		<van-calendar
			v-model:show="showCalender"
			type="range"
			color="#ff9854"
			:show-confirm="false"
			:round="false"
			@confirm="onConfirm"
		/>
	</div>
</template>

<script setup>
	import { useRouter } from 'vue-router'
	import { storeToRefs } from 'pinia'
	import useCityStore from '@/stores/modules/city'
	import { formatMonthDay, getDiffDays } from '@/utils/format_date'
	import { computed, ref } from 'vue'
	import useMainStore from '@/stores/modules/main'

	defineProps({
		hotSuggests: {
			type: Object,
			default: () => [],
		},
	})

	const router = useRouter()
	const cityStore = useCityStore()
	const { currentCity } = storeToRefs(cityStore)
	// 位置/城市
	const positionClick = () => {
		navigator.geolocation.getCurrentPosition(
			(res) => {
				console.log('获取位置成功res', res)
			},
			(err) => {
				console.log('获取位置失败res', err)
			},
			{
				timeout: 50000,
				maximumAge: 0,
				enableHighAccuracy: true,
			}
		)
	}
	// 位置/城市
	const cityClick = () => {
		router.push('city')
	}

	const mainStore = useMainStore()
	const { startDate: nowDate, endDate: newDate } = storeToRefs(mainStore)
	// 日期范围处理
	const startDate = computed(() => formatMonthDay(nowDate.value))
	const endDate = computed(() => formatMonthDay(newDate.value))
	const stayCount = ref(getDiffDays(nowDate.value, newDate.value))
	// 日历
	const showCalender = ref(false)
	const onConfirm = (val) => {
		const selectStartDate = val[0]
		const selectEndDate = val[1]

		mainStore.startDate = selectStartDate
		mainStore.endDate = selectEndDate
		stayCount.value = getDiffDays(val[0], val[1])
		showCalender.value = false
	}

	// 开始搜索
	const searchClick = () => {
		router.push({
			path: '/search',
			query: {
				startDate: startDate.value,
				endDate: endDate.value,
				currentCity: currentCity.value.cityName,
			},
		})
	}
</script>

<style lang="less" scoped>
	.search-box {
		--van-calendar-popup-height: 100%;
	}

	.location {
		display: flex;
		align-items: center;
		height: 44px;
		padding: 0 20px;

		.city {
			flex: 1;
			color: #333;
			font-size: 15px;
		}

		.position {
			width: 74px;
			display: flex;
			align-items: center;

			.text {
				position: relative;
				top: 2px;
				color: #666;
				font-size: 12px;
			}

			img {
				margin-left: 5px;
				width: 18px;
				height: 18px;
			}
		}
	}

	.section {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		padding: 0 20px;
		color: #999;
		height: 44px;

		.start {
			flex: 1;
			display: flex;
			height: 44px;
			align-items: center;
		}

		.end {
			min-width: 30%;
			padding-left: 20px;
		}

		.date {
			display: flex;
			flex-direction: column;

			.tip {
				font-size: 12px;
				color: #999;
			}

			.time {
				margin-top: 3px;
				color: #333;
				font-size: 15px;
				font-weight: 500;
			}
		}
	}

	.date-range {
		height: 44px;
		.stay {
			flex: 1;
			text-align: center;
			font-size: 12px;
			color: #666;
		}
	}

	.price-counter {
		.start {
			border-right: 1px solid var(--line-color);
		}
	}

	.hot-suggests {
		margin: 10px 0;
		height: auto;

		.item {
			padding: 4px 8px;
			margin: 4px;
			border-radius: 14px;
			font-size: 12px;
			line-height: 1;
		}
	}

	.search-btn {
		.btn {
			width: 342px;
			height: 38px;
			max-height: 50px;
			font-weight: 500;
			font-size: 18px;
			line-height: 38px;
			text-align: center;
			border-radius: 20px;
			color: #fff;
			background-image: var(--theme-linear-gradient);
		}
	}
</style>
